<template>
  <ul>
    <li>
      <select @click="choose">选项
        <option value="radio">单选</option>
        <option value="multi">多选</option>
      </select>
    </li>
    <li class="table">
  <template v-if="select == 'multi'">
    <div class="tableData">全选</div>
    <input class="tableData" type="checkbox" @change="checkAll" />
    <div class="tableData">反选</div>
    <input class="tableData" type="checkbox" @change="reverseAll" />
  </template>


    <div class="tableData">文章id</div>
    <div class="tableData">文章标题</div>
    <div class="tableData">文章内容</div>
    <div class="tableData">操作 </div>
    </li>
    <li v-for="(item, index) in tableData" :key="index" class="table">
      <input class="tableData" type="checkbox" :value="item.article_id" @click="multipleChoice" v-model="selected" />
      <div class="tableData">{{ item.article_id }}</div>
      <div class="tableData">{{ item.article_title }}</div>
      <div class="tableData">{{ item.article_content }}</div>
      <button class="tableData" @click="del(item.article_id)">删除</button>
    </li>
  </ul>
  <ul class="pagination">
    <li><button @click="up">上一页</button></li>
    <li v-for="(item, index) in NumberOfPages()" :key="index" @click="getList(item)"
      :class="+currentPage === item ? 'active' : ''">{{ item }}</li>
    <li><button @click="down">下一页</button></li>
    <button @click="mulDel">批量删除</button>
  </ul>
  <ModelCom :isShow="isShow" @cancel="cancel" @confirm="confirm" title="提示" content="是否确认删除？" />
</template>
<script setup>
import { articleQuery, delArticle } from '../api/index';
import ModelCom from '../components/ModelCom.vue';
import { ref } from 'vue'
let tableData = ref([]); //表格数据
let total = ref('');  //总条数
const pageSize = '10'; //文章条数
let currentPage = ref(1); //当前页
const isShow = ref(false) //是否显示弹窗
const Id = ref(null)  //文章id
let selected = ref([]); //选中的数组
let select = ref('radio') //默认为单选


//查询文章信息
const getList = (pageNo) => {
  articleQuery({
    pageNo,
    pageSize
  }).then(res => {
    console.log(res);
    // tableData.value = res?.data?.list || [];
    const { list = [] } = res?.data || {};
    tableData.value = list;
    total.value = res?.data?.total || 0;
    currentPage.value = pageNo;
  })
}

//点击上一页
const up = () => {
  currentPage.value = currentPage.value - 1 >= 1 ? currentPage.value - 1 : 1;
  getList(currentPage.value)
}

//点击下一页
const down = () => {
  currentPage.value = currentPage.value + 1 <= NumberOfPages() ? currentPage.value + 1 : NumberOfPages();
  getList(currentPage.value)
}

getList(currentPage.value);

//总页数
const NumberOfPages = () => {
  return Math.ceil(total.value / pageSize)
}

//删除文章信息
const del = (articleIds) => {
  isShow.value = true
  Id.value = articleIds
}

//取消删除
const cancel = () => {
  isShow.value = false
}

//确定删除
const confirm = () => {
  isShow.value = false
  delArticle({
    articleIds: Id.value.toString()
  }).then(res => {
    console.log(res);
    getList(currentPage.value);
  })
}

const choose = (e) =>{
  const {value} = e.target;
  select.value = value;
   if(select.value=='radio'){
    selected.value = [];

  }
};

//单选
const multipleChoice = (e) => {
  const {value,checked} = e.target;
  console.log( e.target.value);
  console.log(selected.value);
  if(select.value=='radio'){
    selected.value = [];
   if (checked){
    selected.value = [value];
   }
  }
}

// 全选
const checkAll = (e) => {
  const { checked } = e.target;
  if (checked) {
    tableData.value.forEach(element => {
      selected.value.push(element.article_id);
    });
  } else {
    selected.value = [];
  }
}

// 反选
const reverseAll = () => {
  const arr = [];
  tableData.value.forEach(element => {
    const flag = selected.value.includes(element.article_id);
    if (!flag) {
      arr.push(element.article_id)
    }
  });
  selected.value = arr
}
// 批量删除
const mulDel = () => {
  const articleIds = selected.value.join()
  if (selected.value.length) {
    delArticle({
      articleIds
    }).then(res => {
      console.log(res);
      getList(currentPage.value);
    })
  }
}
</script>

<style scoped>
.table {
  display: flex;
  height: 100%;
}

li {
  list-style: none;
  margin: 10px;
}

.tableData {
  flex: 1;
}

.pagination {
  display: flex;
  justify-content: center
}

.active {
  background-color: aqua;
}
</style>